<template>
    <div class="tags" v-if="showTags">
        <ul>
            <li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
                <!-- <router-link
                    :to="{
                        path: item.path,
                        query: {
                            s: item.name == 'EditMenu_1' ? '1' : '0',
                            e: $route.query.e ? $route.query.e : null,
                            id: $route.query.id ? $route.query.id : null
                        }
                    }"
                    class="tags-li-title"
                > -->

                <router-link :to="{}" class="tags-li-title" @click.native="handleLink($event, item.path, item.name)">
                    {{ item.title }}
                </router-link>
                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <el-button size="mini" type="primary"> 标签选项<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import bus from './bus';
export default {
    data() {
        return {
            // tagsList: []
        };
    },
    watch: {
        '$route.path'(a, b) {}
    },
    methods: {
        handleLink(event, path, name) {
            console.log(event, path, name);
            event.preventDefault();

            if (['/edit/menu', '/edit/menu_1', '/radio/menu_1', '/ranking/menu_1'].includes(path)) {
                if (path === '/edit/menu') {
                    this.$router.replace({
                        path
                    });
                } else if (['/edit/menu_1', '/radio/menu_1', '/ranking/menu_1'].includes(path)) {
                    this.$router.replace({
                        path,
                        query: {
                            s: name == 'EditMenu_1' ? '1' : '0',
                            e: localStorage.getItem('edit_menu_e') ? localStorage.getItem('edit_menu_e') : null,
                            id: localStorage.getItem('id_menu') ? localStorage.getItem('id_menu') : null
                        }
                    });
                }
            } else if (['/song/info', '/song/admin', '/song/checked'].includes(path)) {
                if (path === '/song/admin') {
                    this.$router.replace({
                        path
                    });
                } else if (path === '/song/info') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_song') ? localStorage.getItem('id_song') : null
                        }
                    });
                } else if (path === '/song/checked') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_song') ? localStorage.getItem('id_song') : null
                        }
                    });
                }
            } else if (['/singer_/edit', '/singer_/admin', '/singer_/checked'].includes(path)) {
                if (path === '/singer_/admin') {
                    this.$router.replace({
                        path
                    });
                } else if (path === '/singer_/edit') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_singer') ? localStorage.getItem('id_singer') : null
                        }
                    });
                } else if (path === '/singer_/checked') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_singer') ? localStorage.getItem('id_singer') : null
                        }
                    });
                }
            } else if (['/album_3/info_2', '/album_3/admin', '/album_3/checked'].includes(path)) {
                if (path === '/album_3/admin') {
                    this.$router.replace({
                        path
                    });
                } else if (path === '/album_3/info_2') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_album') ? localStorage.getItem('id_album') : null
                        }
                    });
                } else if (path === '/album_3/checked') {
                    this.$router.replace({
                        path,
                        query: {
                            id: localStorage.getItem('id_album') ? localStorage.getItem('id_album') : null
                        }
                    });
                }
            } else if (['/cp/manage', '/cp/copyright'].includes(path)) {
                if (path === '/cp/manage') {
                    this.$router.replace({
                        path
                    });
                } else if (path === '/cp/copyright') {
                    if (localStorage.getItem('id_cpmanage')) {
                        this.$router.replace({
                            path,
                            query: {
                                id: localStorage.getItem('id_cpmanage')
                            }
                        });
                    } else {
                        this.$router.replace({
                            path
                        });
                    }
                }
            } else if (['/warehouse_/manage', '/warehouse_/edit', '/warehouse_/details'].includes(path)) {
                if (path === '/warehouse_/manage') {
                    this.$router.replace({
                        path
                    });
                } else if (['/warehouse_/edit', '/warehouse_/details'].includes(path)) {
                    if (localStorage.getItem('id_warehouse')) {
                        this.$router.replace({
                            path,
                            query: {
                                id: localStorage.getItem('id_warehouse')
                            }
                        });
                    } else {
                        this.$router.replace({
                            path
                        });
                    }
                }
            }

            // 默认
            else {
                this.$router.replace({
                    path,
                    query: {}
                });
            }
        },
        ...mapMutations({
            SET_TAGSLIST: 'SET_TAGSLIST',
            // 歌曲管理
            SET_QUKUSONG_DATA: 'SET_QUKUSONG_DATA',
            SET_QUKUSONG_PAGETOTAL: 'SET_QUKUSONG_PAGETOTAL',
            SET_QUKUSONG_QUERY: 'SET_QUKUSONG_QUERY',
            // 歌手管理
            SET_QUKUARTIST_DATA: 'SET_QUKUARTIST_DATA',
            SET_QUKUARTIST_PAGETOTAL: 'SET_QUKUARTIST_PAGETOTAL',
            SET_QUKUARTIST_QUERY: 'SET_QUKUARTIST_QUERY',
            // 专辑管理
            SET_QUKUALBUM_DATA: 'SET_QUKUALBUM_DATA',
            SET_QUKUALBUM_PAGETOTAL: 'SET_QUKUALBUM_PAGETOTAL',
            SET_QUKUALBUM_QUERY: 'SET_QUKUALBUM_QUERY'
        }),
        isActive(path) {
            // return path === this.$route.fullPath;
            return path === this.$route.path;
        },
        // 关闭单个标签
        closeTags(index) {
            console.log(index, this.tagsList);
            let delItem = this.tagsList.splice(index, 1)[0];
            console.log(delItem, this.$route);
            let item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
            if (item) {
                // delItem.path === this.$route.fullPath && this.$router.push(item.path); // push() 可直接接受一个字符串
                // delItem.path === this.$route.path &&
                //     this.$router.push({
                //         path: item.path
                //     });
                // 解锁
                switch (delItem.name) {
                    case 'SongInfo':
                        this.$handleUnlock(
                            () => {
                                delItem.path === this.$route.path &&
                                    this.$router.push({
                                        path: item.path
                                    });
                            },
                            '/song/unlock',
                            localStorage.getItem('id_song')
                        );
                        break;
                    case 'SingerInfo':
                        this.$handleUnlock(
                            () => {
                                delItem.path === this.$route.path &&
                                    this.$router.push({
                                        path: item.path
                                    });
                            },
                            '/artist/unlock',
                            localStorage.getItem('id_singer')
                        );
                        break;

                    case 'AlbumInfo_2':
                        this.$handleUnlock(
                            () => {
                                delItem.path === this.$route.path &&
                                    this.$router.push({
                                        path: item.path
                                    });
                            },
                            '/album/unlock',
                            localStorage.getItem('id_album')
                        );
                        break;

                    case 'EditMenu_1':
                        console.log(22222);
                        this.$handleUnlock(
                            () => {
                                delItem.path === this.$route.path &&
                                    this.$router.push({
                                        path: item.path
                                    });
                            },
                            '/playlist/unlock',
                            localStorage.getItem('id_menu')
                        );
                        break;
                    default:
                        if (delItem.name === 'QukuSong') {
                            console.log(8888888);
                            this.SET_QUKUSONG_DATA([]);
                            this.SET_QUKUSONG_PAGETOTAL(0);
                            this.SET_QUKUSONG_QUERY({
                                show: false,
                                checked: false,
                                pageIndex: 1,
                                pageSize: 10,
                                ids: '',
                                importName: '',
                                actorImportName: '',
                                albumImportName: '',
                                cppoaName: '',
                                genre: '',
                                isrc: '',
                                status: '',
                                creator: ''
                            });
                        } else if (delItem.name === 'QukuArtist') {
                            this.SET_QUKUARTIST_DATA([]);
                            this.SET_QUKUARTIST_PAGETOTAL(0);
                            this.SET_QUKUARTIST_QUERY({
                                show: false,
                                checked: false,
                                pageIndex: 0,
                                pageSize: 10,
                                id: '',
                                name: '',
                                namePinyinFull: '',
                                type: '',
                                area: '',
                                status: ''
                            });
                        } else if (delItem.name === 'QukuAlbum') {
                            this.SET_QUKUALBUM_DATA([]);
                            this.SET_QUKUALBUM_PAGETOTAL(0);
                            this.SET_QUKUALBUM_QUERY({
                                show: false,
                                checked: false,
                                pageIndex: 1,
                                pageSize: 10,
                                id: '',
                                importName: '',
                                namePinyinFull: '',
                                actorImportName: '',
                                upc: '',
                                status: ''
                            });
                        }
                        delItem.path === this.$route.path &&
                            this.$router.push({
                                path: item.path
                            });
                        break;
                }

                // if (delItem.name === 'SongInfo') {
                //     this.$handleUnlock(
                //         () => {
                //             console.log(this);
                //             delItem.path === this.$route.path &&
                //                 this.$router.push({
                //                     path: item.path
                //                 });
                //         },
                //         '/song/unlock',
                //         localStorage.getItem('id_song')
                //     );
                // } else {
                //     delItem.path === this.$route.path &&
                //         this.$router.push({
                //             path: item.path
                //         });
                // }
            } else {
                // 标签全部删完了 跳转到首页
                this.$router.push('/');
            }

            this.SET_TAGSLIST(this.tagsList);
        },
        // 关闭全部标签
        closeAll() {
            if (
                this.tagsList.some(item => {
                    return ['SongInfo', 'SingerInfo', 'AlbumInfo_2', 'EditMenu_1'].includes(item.name);
                })
            ) {
                return this.$message.warning({
                    message: '当前打开的标签页中含有编辑页面',
                    duration: 1500
                });
            }
            // this.tagsList = [];
            this.SET_TAGSLIST([]);
            this.$router.push('/');
        },
        // 关闭其他标签
        closeOther() {
            if (
                this.tagsList.some(item => {
                    return ['SongInfo', 'SingerInfo', 'AlbumInfo_2', 'EditMenu_1'].includes(item.name);
                })
            ) {
                return this.$message.warning({
                    message: '当前打开的标签页中含有编辑页面',
                    duration: 1500
                });
            }
            let curItem = this.tagsList.filter(item => {
                return item.path === this.$route.path;
            });
            console.log(this.$route.path, curItem);
            this.SET_TAGSLIST(curItem);
            // this.tagsList = curItem;
        },
        // 设置标签
        setTags(route) {
            console.log(route);
            let isExist = this.tagsList.some(item => {
                return item.path === route.path;
            });
            console.log(isExist);
            if (!isExist) {
                if (this.tagsList.length >= 8) {
                    this.tagsList.shift();
                }
                console.log(route);
                try {
                    this.tagsList.push({
                        title: route.meta.title,

                        // path: route.fullPath,
                        path: route.path,
                        // name: route.matched[1].components.default.name
                        name: route.name
                    });
                } catch (err) {
                    console.dir(err);
                    this.$message.error({
                        message: err.message,
                        duration: 1500
                    });
                }
                console.log(this.tagsList);
                this.SET_TAGSLIST(this.tagsList);
            }
            bus.$emit('tags', this.tagsList);
        },
        handleTags(command) {
            command === 'other' ? this.closeOther() : this.closeAll();
        }
    },
    computed: {
        ...mapGetters({
            tagsList: 'tagsList'
        }),
        showTags() {
            return this.tagsList.length > 0;
        }
    },
    watch: {
        $route(newValue, oldValue) {
            this.setTags(newValue);
        }
    },
    created() {
        this.setTags(this.$route);

        // 监听关闭当前页面的标签页
        bus.$on('close_current_tags', () => {
            for (let i = 0, len = this.tagsList.length; i < len; i++) {
                let item = this.tagsList[i];
                // if (item.path === this.$route.fullPath) {
                if (item.path === this.$route.path) {
                    if (i < len - 1) {
                        this.$router.push(this.tagsList[i + 1].path);
                    } else if (i > 0) {
                        this.$router.push(this.tagsList[i - 1].path);
                    } else {
                        this.$router.push('/');
                    }
                    this.tagsList.splice(i, 1);
                    break;
                }
            }
        });
    }
};
</script>

<style>
.tags {
    position: relative;
    height: 30px;
    overflow: hidden;
    background: #fff;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
}

.tags ul {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tags-li {
    float: left;
    margin: 3px 5px 2px 3px;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    height: 23px;
    line-height: 23px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.tags-li:not(.active):hover {
    background: #f8f8f8;
}

.tags-li.active {
    color: #fff;
}

.tags-li-title {
    float: left;
    /* max-width: 80px; */
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
}

.tags-li.active .tags-li-title {
    color: #fff;
}

.tags-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    /* box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1); */
    z-index: 10;
}
</style>
